.signinCalendar {
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 15px;

    & ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    p {
        margin: 0;
    }

    & .calendar {
        color: rgba(0, 0, 0, 0.8);
        background-color: #fff;
        border-radius: 10px;/*no*/

        & .title {
            padding-top: 14px;
            padding-bottom: 30px;

            font-size: 14px;
            text-align: center;
        }

        & .row {
            display: flex;
        }
    
        & .cell {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
    
            flex: 1;
            min-width: 0;
        }

        & .day {
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;

            &.signed {
                background-image: url("./images/day_signed_bg.png");
            }

            &.waitSign {
                background-image: url("./images/day_waitSign_bg.png");
            }

            &.today {
                position: relative;

                &::after {
                    position: absolute;
                    bottom: 0;

                    content: "";
                    display: inline-block;
                    width: 4px;/*no*/
                    height: 4px;/*no*/

                    border-radius: 50%;
                    background-color: red;
                }
            }
        }
    
        & .handleBar {
            position: relative;
            justify-content: center;

            margin-bottom: 13px;
        }

        & .signinCard {
            position: absolute;
            left: 15px;

            padding: 4px 6px;

            background-color: rgba(255, 214, 0, 0.8);
            border-radius: 4px;/*no*/

            &.hasCard {
                width: 20px;
                height: 20px;
                padding: 0;

                background-color: transparent;
                background-image: url("./images/hasCard.png");
                background-repeat: no-repeat;
                background-size: contain;
            }

            .am-badge {
                position: absolute;
                left: 50%;
                top: -50%;
            }

            .am-badge-text {
                color: #464646;
                background-color: rgba(255, 214, 0, 0.6);
            }
        }

        & .todayJump {
            position: absolute;
            right: 18px;
            top: -4px;

            width: 20px;
            height: 20px;

            background-image: url("./images/todoJump_bg.png");
            background-repeat: no-repeat;
            background-size: contain;
        }

        & .monthTitle {
            display: flex;
            align-items: center;

            font-size: 16px;

            & .listWrapper {
                position: relative;

                height: 1.4em;

                overflow: hidden;

                & > .list {
                    position: relative;
                    top: 0;

                    height: 100%;

                    transition: top 0.5s;

                    & > li {
                        height: 100%;
                        line-height: 1.4;
                        white-space: nowrap;
                        opacity: 0;

                        &.active {
                            opacity: 1;
                        }
                    }
                }
            }

            & > .icon {
                display: block;
                width: 10px;/*no*/
                height: 6px;/*no*/
                margin-left: 5px;/*no*/

                background-image: url("./images/arrow_down.png");
                background-repeat: no-repeat;
                background-size: contain;
            }
        }
    
        & .weekTitle {
            color: rgba(0, 0, 0, 0.2);
            text-align: center;
        }
        
        /* 解决antd-mobile 走马灯 item高度不一致时，高度较大的显示不完整的bug */
        .slider-list {
            height: auto !important;

            .slider-slide {
                position: static !important;
                height: 0 !important;
            }
            .slider-slide.active {
                height: auto !important;
            }
        }

        .good,
        .bad {
            display: flex;
            align-items: center;

            flex: 1;
            min-width: 0;
            padding-top: 10px;
            padding-bottom: 20px;
            margin-left: 15px;

            font-size: 12px;
            line-height: 1.62em;
            color: rgba(0, 0, 0, 0.4);

            .icon {
                width: 1.6em;
                height: 1.6em;
                margin-right: 0.4em;
                border-radius: 50%;

                color: #fff;
                text-align: center;
                line-height: 1.6em;
                background-color: #ccc;
            }
        }
        .good {
            .icon {
                background-color: rgb(27, 227, 130);
            }
        }
        .bad {
            .icon {
                background-color: rgb(244, 102, 51);
            }
        }
    }

    .constellation {
        margin-top: 10px;
        border-radius: 10px;/*no*/

        font-size: 14px;
        color: #8f8f95;
        background-color: #fff;

        & > .title {
            color: #464646;
            text-align: center;

            .icon {
                display: inline-block;
                width: 39px;
                height: 39px;
                margin-top: 15px;

                background-repeat: no-repeat;
                background-size: contain;

                &.constellation-name-1 {
                    background-image: url("./images/constellation_name_1.png");
                }
                &.constellation-name-2 {
                    background-image: url("./images/constellation_name_2.png");
                }
                &.constellation-name-3 {
                    background-image: url("./images/constellation_name_3.png");
                }
                &.constellation-name-4 {
                    background-image: url("./images/constellation_name_4.png");
                }
                &.constellation-name-5 {
                    background-image: url("./images/constellation_name_5.png");
                }
                &.constellation-name-6 {
                    background-image: url("./images/constellation_name_6.png");
                }
                &.constellation-name-7 {
                    background-image: url("./images/constellation_name_7.png");
                }
                &.constellation-name-8 {
                    background-image: url("./images/constellation_name_8.png");
                }
                &.constellation-name-9 {
                    background-image: url("./images/constellation_name_9.png");
                }
                &.constellation-name-10 {
                    background-image: url("./images/constellation_name_10.png");
                }
                &.constellation-name-11 {
                    background-image: url("./images/constellation_name_11.png");
                }
                &.constellation-name-12 {
                    background-image: url("./images/constellation_name_12.png");
                }
            }
        }

        .fortune {
            display: inline-block;
            box-sizing: border-box;
            padding-left: 20px;

            vertical-align: top;

            &:nth-of-type(1) {
                width: 53%;
            }

            &:nth-of-type(2) {
                width: 47%;
            }

            & > li {
                margin-top: 15px;
                margin-bottom: 15px;
            }

            .title {
                margin-right: 7.5px;
            }

            .value-icon {
                & > i {
                    display: inline-block;
                    width: 12px;
                    height: 12px;
                    margin-left: 2.5px;
                    margin-right: 2.5px;

                    background-image: url("./images/fortune_value_icon.png");
                    background-repeat: no-repeat;
                    background-size: contain;
                }
            }
            .value-icon-1 > i:nth-child(1),
            .value-icon-2 > i:nth-child(1),
            .value-icon-2 > i:nth-child(2),
            .value-icon-3 > i:nth-child(1),
            .value-icon-3 > i:nth-child(2),
            .value-icon-3 > i:nth-child(3),
            .value-icon-4 > i:nth-child(1),
            .value-icon-4 > i:nth-child(2),
            .value-icon-4 > i:nth-child(3),
            .value-icon-4 > i:nth-child(4),
            .value-icon-5 > i:nth-child(1),
            .value-icon-5 > i:nth-child(2),
            .value-icon-5 > i:nth-child(3),
            .value-icon-5 > i:nth-child(4),
            .value-icon-5 > i:nth-child(5) {
                background-image: url("./images/fortune_value_icon_active.png");
            }
            
        }

        .question {
            padding-bottom: 20px;
            text-align: center;

            .content {
                margin-top: 5px;
                margin-bottom: 20px;

                font-size: 16px;
                color: #464646;
            }

            .answer {
                position: relative;
                display: flex;
                justify-content: center;

                margin-left: 9px;
                margin-right: 9px;

                .option {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex: 1;
                    min-width: 0;
                    height: 40px;
                    margin-left: 6px;
                    margin-right: 6px;
                    border-radius: 5px; /*no*/

                    color: rgba(0, 0, 0, 0.8);
                    background-color: rgb(244, 244, 244);

                    &.selected {
                        background-color: rgb(255, 224, 76);
                    }
                }

                .vs {
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    
                    width: 22px;
                    height: 22px;
                    margin-left: -12px;
                    margin-top: -12px;
                    border: 2px solid #fff;
                    border-radius: 50%;

                    background-image: url("./images/vs.png");
                    background-repeat: no-repeat;
                    background-size: contain;
                }
            }
        }
    }

    .signinCardPop {
        display: none;
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 99;

        width: 100%;
        border-top: 1px solid #f6f6f6;/*no*/

        background-color: #fff;

        &.show {
            display: block;
        }

        .row {
            display: flex;
        }
        .col {
            margin-left: 1.2em;
            margin-right: 1.2em;
        }

        .tip {
            justify-content: space-between;
            align-items: center;

            padding-top: 1em;
            padding-bottom: 1em;

            strong {
                font-size: 1.5em;
                font-weight: normal;
                margin-right: 0.15em;
            }
        }

        .btn-useSigninCard {
            padding-top: 1.2em;
            padding-bottom: 1.2em;

            font-size: 14px;
            text-align: center;
            background-color: rgba(255, 214, 0, .8);
        }
    }
}